<template>
  <div>
    <el-container>
      <el-aside width="200px" style="min-height:100vh;background:#fff">
        <el-menu @select="selectID2" v-if="bumen!=='2'&&bumen!=='4'">
          <!-- <el-submenu :index="item.hash.id" v-for="(item,index) in sideList" :key="item.id">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{item.hash.pname}}</span>
            </template>
            <el-submenu :index="index+'-'+1">
              <template slot="title"><i class="iconfont icon-shengchan"></i>&nbsp;&nbsp;&nbsp;&nbsp;绩效考核</template>
              <el-menu-item :index="index+'-'+1+'-'+1">普通指标</el-menu-item>
              <el-menu-item :index="index+'-'+1+'-'+2">加减分项</el-menu-item>
            </el-submenu>

          </el-submenu> -->
          <!-- <el-menu-item :index="index+'-'+2"><i class="iconfont icon-shengchan" style="font-size:20px;float:left"></i>反向考评</el-menu-item> -->

          <el-menu-item v-for="(item,index) in sideList" :key="item.id" :index="item.hash.id"><i class="iconfont icon-shengchan"></i>&nbsp;&nbsp;&nbsp;&nbsp;{{item.hash.pname}}</el-menu-item>

        </el-menu>
        <el-menu router :defaultActive="activeIndex">
          　　　　<template v-for="(item , idx) in sideMenu">
            　　<el-submenu :index="item.loadpage" v-if="item.children.length>0" :key="idx">
              <template slot="title">&nbsp;&nbsp;&nbsp;&nbsp;<i class="iconfont icon-shengchan"></i>&nbsp;&nbsp;&nbsp;&nbsp;{{item.name}}</template>
              　　<el-menu-item v-for="(itemChild , idx) in item.children" :index="itemChild.loadpage" :key="idx">
                　　{{itemChild.name}}
                　　</el-menu-item>
            </el-submenu>
            　　　　　　　<el-menu-item :index="item.loadpage" v-else :key="idx">
              <i class="iconfont icon-shengchan"></i>&nbsp;&nbsp;&nbsp;&nbsp;{{item.name}}
              　　</el-menu-item>
            　　　　</template>
          　　</el-menu>
      </el-aside>


      <transition name="el-fade-in">
        <el-container style="background:#f1f1f1">
          <el-main style="padding:0">
            <nuxt-child v-if="isRouterAlive"/>
          </el-main>
        </el-container>
      </transition>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRouterAlive: true,
      ts: this.newStore(),
      sideList: [],
      sideMenu: [],
      year: '',
      bumen: localStorage.getItem('belongunit'),
    };
  },
  computed: {
    activeIndex() {
      return this.$route.path;
    },
  },
  created() {
    // 初始化时间为当前时间
    this.year = `${new Date().getFullYear()}`;
    this.getsideList();
    this.getSidemenu();
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      setTimeout(() => {
        this.$nextTick(() => {
          this.isRouterAlive = true;
        });
      }, 500);
    },
    selectID2(index, indexPath) {
      this.reload();
      if (localStorage.getItem('belongunit') == '1') {
        this.$router.push({
          path: '/glperformance/assess2',
          query: {
            aorgid: '', propertyid: indexPath[0], name: localStorage.getItem('orgname'), year: this.year,
          },
        });
      } else {
        this.$router.push({ path: '/glperformance/assess', query: { id: indexPath[0] } });
      }
    },
    // selectID(index, indexPath) {
    //   if (index.substring(index.indexOf('-') + 1) == '1-1') {
    //     if (localStorage.getItem('belongunit') == '1') {
    //       this.$router.push({
    //         path: '/glperformance/assess2',
    //         query: {
    //           aorgid: '', propertyid: indexPath[0], name: localStorage.getItem('orgname'), year: this.year,
    //         },
    //       });
    //     } else {
    //       this.$router.push({ path: '/glperformance/assess', query: { id: indexPath[0] } });
    //     }
    //   } else if (index.substring(index.indexOf('-') + 1) == '1-2') {
    //     if (localStorage.getItem('belongunit') == '1') {
    //       this.$router.push({
    //         path: '/glperformance/grade2',
    //         query: {
    //           aorgid: '', propertyid: indexPath[0], name: localStorage.getItem('orgname'), year: this.year,
    //         },
    //       });
    //     } else {
    //       this.$router.push({ path: '/glperformance/grade', query: { id: indexPath[0] } });
    //     }
    //   } else {
    //     this.$router.push({ path: '/glperformance/test', query: { id: indexPath[0] } });
    //   }
    // },
    getsideList() {
      const req = {
        handle: '04A3682CDCA57EBA0DA6C15FB2ECC84BE133DA25EC7F9F14C878125FE067FE5A',
        start: '0',
        limit: '10',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.sideList = ts.d.data.operation1;
        this.sideList.forEach((element) => {
          element.hash.path1 = '/glperformance/assess';
          element.hash.path2 = '/glperformance/grade';
          element.hash.path3 = '/glperformance/test';
        });
      });
    },
    getSidemenu() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B843B7A441565EC6C4A6860EBB8D9E769',
        supid: '103',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.data = ts.d.data.operation1[0].hash.privstr;
        this.sideMenu = JSON.parse(this.data);
        // console.log(this.sideMenu);
      });
    },
  },
};
</script>


<style lang="stylus" scoped>
.el-menu-item i
  font-size 20px
.menu_i
  float left
.el-menu-item
  text-align left
  border-bottom 1px solid #e6e6e6
.el-submenu.is-active .el-submenu__title
  border-bottom-color #e6e6e6

.el-menu-item.is-active
  background #f1f1f1
  color black
.el-submenu__title
  padding-left 33px
  border-bottom 1px solid #f1f1f1
  border-top 1px solid #f1f1f1
  i
    &:first-child
      font-size 20px
      padding-right 5px
    &:last-child(3)
      padding-bottom 5px
</style>
